<template>
	<view>
	<!-- 	<view @click.capture="backList">
			<back-fixed :title="Toptitle" urlBack="" :isBack="isBack"></back-fixed>
		</view> -->

		<view class="main">
			<view class="box">
				<view class="input_content">
					<view class="titles">
						标签组名称
					</view>
					<view class="inptStyle">
						<view class="">
							<u-input v-model="form.name" maxlength="30" :border="false"
								placeholder-style="color: #C1C1C1;font-size:32rpx" placeholder="请输入标签组名称"></u-input>
						</view>
					</view>
				</view>

				<view class="line_box" style="padding-bottom: 20rpx;">
					<view class="title">
						标签组类型
					</view>
					<view class="line" @click="gruopType">
						<view class="line_title" style="padding: 20rpx 0">
							{{typeCodeText}}
						</view>
						<view class="">
							<u-icon :name="typeArrow" size="40rpx" color="#CCCCCC"></u-icon>
						</view>
					</view>
				</view>

				<view class="line_box" style="padding-bottom: 300rpx;">
					<view class="title">
						标签
					</view>
					<view class="line" v-for="value,key in form.tagList" :key="value.randomId">
						<view class="line_title">
							<u-input v-model="value.name" maxlength="30" :border="false"
								placeholder-style="color: #C1C1C1;font-size:32rpx" placeholder="请输入标签名称"></u-input>
						</view>
						<view class="" @click.stop="delItem(key)">
							<u-image :src="minus" width="40rpx" height="40rpx"></u-image>
						</view>
					</view>
					<view class="line_mins" @click.stop="addMark()">
						<view class="line_title">
							<u-input v-model="some" maxlength="30" :border="false" :disabled="true"
								placeholder-style="color: #C1C1C1;font-size:32rpx" placeholder="请添加标签"></u-input>
						</view>
						<view class="">
							<u-image :src="plus" width="40rpx" height="40rpx"></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :title="title" :content="content" confirm-text="确认" cancel-text="取消"
			cancel-color="#333333" :show-cancel-button="true" confirm-color="#4DC0D9" @confirm="confirmBth">
			<view class="slot-content" style="margin:0 36rpx 36rpx 36rpx;">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>

		<u-modal v-model="nodel" :content="nodelContent" confirm-color="#4DC0D9" 
			confirm-text="确认"  @confirm="ok" :show-title="false"></u-modal>
			
		<u-modal v-model="delShow" content="确定删除该标签组吗？" confirm-color="#4DC0D9" :show-cancel-button="true"
			confirm-text="确认" cancel-text="取消" @confirm="confirmDel" :cancel-style="{'borderRight':'1px solid #f8f8f8'}"></u-modal>
		<u-select v-model="showGroup" :list="groupList" @confirm="typeConfirm" confirm-color="#4DC0D9"
			:safe-area-inset-bottom="true"></u-select>
		<view class="bottom_btn_two" v-if="isEdit == 1">
			<view class="del_btn" @click="delGroup">
				删除标签组
			</view>
			<view class="my_button" @click="confirm">
				确认
			</view>
		</view>
		<u-modal v-model="errorShow" :content="delErrorText" confirm-color="#4DC0D9"
			confirm-text="确认"  ></u-modal>
		<bottom-button @confirm="confirm" style="z-index: 10;position: absolute;" v-if="isEdit == 0"></bottom-button>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		postMark,
		putMark,
		DelMark
	} from '@/api/index.js'
	export default {
		data() {
			return {
				// "tagList": [
				//         {
				//           "name": "新增测试2-1"
				//         },
				//         {
				//           "name": "新增测试2-2"
				//         }
				//       ],
				//       "name": "新增测试8",
				//       "groupType": 2
				// ],
				delErrorText:'', //删除时的错误信息提示太长了，需要用u-modal
				errorShow:false,
				Toptitle: '新建标签组',
				isEdit: 0, //1是编辑
				isBack: false,
				content: '',
				show: false,
				delShow: false,
				nodel:false,  //不能删除提示
				nodelContent:'',
				some: '',
				form: {
					name: '',
					groupType: '2',
					tagList: [
						// {
						// randomId:'',
						// name: '',
						// },
					]
				},
				typeArrow: 'arrow-down',
				groupList: [{
						value: 2,
						label: '科室标签'
					},
					{
						value: 1,
						label: '医院标签'
					},
					//{value:'3',label:'cc'},
				],
				minus: require('@/static/icon/minus.png'),
				plus: require('@/static/icon/plus.png'),
				showGroup: false,
				typeCodeText: '科室标签'
			}
		},
		watch: {
			showGroup(e) {
				if (e) {
					this.typeArrow = 'arrow-up'
				} else {
					this.typeArrow = 'arrow-down'
				}
			}
		},
		onLoad(params) {
			this.init(params)
		},
		methods: {
			backList() {
				const res = this.$store.state.doc.groupEdit.data
				const arr = this.form.tagList.findIndex(v => v.name.length > 1)
				if (this.form.name.length < 1 && arr < 1) { //不填就直接返回
					// uni.redirectTo({
					// 	url: '/pages/intel/cardList'
					// })
					uni.navigateBack({
						delta: 1
					});
					return
				}
				this.show = true
				
				// console.log(this.form.name !== res.name,
				// this.form.groupType !== res.groupType,
				// this.compareArrays(this.form.tagList, res.tagList));
				//console.log( this.compareArrays(this.form.tagList, res.tagList));

				// if (this.form.name !== res.name &&
				// 	this.form.groupType !== res.groupType &&
				// 	!this.compareArrays(this.form.tagList, res.tagList)
				// ) {
				// 	this.show = true
				// } else {
				// 	uni.redirectTo({
				// 		url: '/pages/intel/cardList'
				// 	})
				// }
			},
			compareArrays(arr1, arr2) {  //对比两数组是否一样
				if (arr1.length !== arr2.length) {
					return false;
				}

				for (let i = 0; i < arr1.length; i++) {
					if (arr1[i] !== arr2[i]) {
						return false;
					}
				}

				return true;
			},
			ok(){
				this.nodel = false
			},
			init(params) {
				this.content =
					'<p style="color: #333333;font-size: 32rpx;font-weight: bold;text-align: center;">退出后当前编辑的信息将丢失，确定要退出吗？</p>'
				this.addMark()
				if (params.isEdit) { //编辑
					this.isEdit = params.isEdit
					let res = this.$u.deepClone(this.$store.state.doc.groupEdit.data)
					this.Toptitle = '编辑标签组'
					this.form.name = res.name
					this.form.groupType = res.groupType
					this.typeCodeText = this.groupList.find(v => v.value == res.groupType)?.label
					this.form.tagList = res.tagList.map(v => {
						v.name = v.tagName
						v.randomId = v.tagId
						return v
					})
					this.form.qywxGroupId = res.qywxGroupId
					this.form.id = res.id
					//console.log(res, this.form, 555);
				}
			},
			detectDuplicateNames(tagList) {
				const nameSet = new Set(); // 创建一个新的Set用于存储唯一的name
				const duplicateNames = []; // 创建一个新的数组用于存储重复的name
				for (const tag of this.form.tagList) {
					if (tag.name && nameSet.has(tag.name)) {
						// 如果name已经在Set中，说明是重复的
						if (!duplicateNames.includes(tag.name)) {
							duplicateNames.push(tag.name); // 将重复的name添加到数组中
						}
					} else {
						// 如果name不在Set中，将其添加到Set中
						nameSet.add(tag.name);
					}
				}
				return duplicateNames; // 返回包含所有重复name的数组
			},
			delItem(key) { //删除某一项
				if (this.form.tagList.length > 1) {
					this.form.tagList.splice(key, 1)
				} else {
					this.$u.toast('标签组最少有一个标签才能创建或者修改')
				}

			},
			addMark() { //添加标签
				let num = this.$u.guid(20)
				this.form.tagList.push({
					name: '',
					randomId: num
				})
			},
			typeConfirm(e) { //选择类型层确认
				this.form.groupType = e[0].value
				this.typeCodeText = e[0].label
				this.showGroup = false
			},
			gruopType() { //标签组类型
				this.showGroup = true
			},
			async postMyMark(obj) { //新增或者编辑
				//if()
				//putMark()
				if (this.isEdit == 1) {
					let edit = await putMark(obj)
					return edit
				}
				let res = await postMark(obj)
				return res
				//console.log(res);
			},
			async postData() {
				let res = await this.postMyMark({
					...this.form
				})
				//console.log(res, 'code');
				if (res.code == 200) {
					this.$u.toast(res.msg)
					if (this.isEdit == 0) {
						uni.redirectTo({
							url: '/pages/intel/cardList'
						});
						// uni.redirectTo({
						// 	url: '/pages/intel/cardList'
						// })
					}
				}
				if(res.code == 401){
					this.nodelContent = res.msg
					this.nodel = true
				}
				//console.log(res,'res');
			},
			confirmBth(e) {
				//console.log(44455,e);
				this.show = false
				uni.redirectTo({
					url: '/pages/intel/cardList'
				})
				//发送请求i
			},
			confirm() { //确认
				if (this.detectDuplicateNames().length > 0) { //校验
					this.$u.toast('该标签名称已被占用')
					return
				}
				if (this.form.name.length < 1) {
					this.$u.toast('请填写标签组名称')
					return
				}
				if (this.form.tagList.findIndex(v => v.name.length > 0) == -1) {
					this.$u.toast('标签组最少有一个标签才能创建或者修改')
					return
				}
				//this.form.tagList = this.form.tagList.filter(v=> v.name.length > 0)
				
				if(!this.form.tagList.every(v=> v.name.length >0)){
					this.$u.toast('请填写标签名称')
					return
				}
			
				if (this.isEdit == 1) {
					this.form.tagList.map(v => {
						v.tagName = v.name
						return v
					})
				}
				//return
				//this.show = true
				this.postData()
			},
			delGroup() {
				this.delShow = true
			},
			async confirmDel() { //删除接口
				if (this.form.tagList.length > 0 && this.form.tagList[0].tagGroupId.length > 0) {
					let tagGroupId = this.form.tagList[0].tagGroupId
					let res = await DelMark(tagGroupId)
					//console.log(res);
					if(res.code == 200){
						uni.redirectTo({
							url: '/pages/intel/cardList'
						})
					}else{
						this.errorShow = true
						this.delErrorText = res.msg
					}
				} else {
					//this.$u.toast
				}
				//console.log(999,this.$store.state.doc.groupEdit);
				//let res = await DelMark(tagGroupId)
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input__input{
		font-size: 32rpx !important;
	}
	.main {
		position: absolute;
		height: 100vh;
		width: 100%;
		padding-top: 20px;
		background-color: #F8F8F8;

		.box {
			background-color: #F8F8F8;
			padding: 0 24rpx;

			.line_box {
				//padding-bottom: 40rpx;

				.title {
					margin-bottom: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.line_mins {
					background-color: white;
					padding: 5rpx 24rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.line {
					background-color: white;
					padding: 5rpx 24rpx;
					margin: 20rpx 0;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					//margin-bottom: 28rpx;

					.line_title {
						flex: 1;
						margin-right: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						//color: #C1C1C1;
						line-height: 38rpx;
					}
				}

				.inptStyle {
					background-color: white;
					padding: 10rpx 24rpx 10rpx 24rpx;
					border-radius: 20rpx;
				}
			}

			.input_content {
				margin-bottom: 40rpx;

				.titles {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
					padding-bottom: 12rpx;
				}

				.inptStyle {
					background-color: white;
					padding: 5rpx 24rpx 5rpx 24rpx;
					border-radius: 20rpx;

				}
			}

		}
	}

	.bottom_btn_two {
		position: fixed;
		bottom: 0;
		z-index: 10;
		color: red;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 24rpx 80rpx 24rpx;

		//margin:0 24rpx;
		.my_button {
			background-color: #4DC0D9;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			padding: 20rpx 0;
			width: 100%;
			border-radius: 20rpx;
			margin-left: 22rpx;
		}

		.del_btn {
			background-color: #FFEBEB;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #F1280D;
			line-height: 38rpx;
			text-align: center;
			width: 100%;
			padding: 20rpx 0;
			border-radius: 20rpx;
		}
	}
</style>